<template>
  <div class="login">
    <!-- 页头 -->
    <div class="header">
      <div class="top">
        <div class="logo"></div>
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="container">
      <div class="login-box">
        <form>
          <div class="box-top">
            <div class="left">
              <div>1</div>
              <p>账号信息</p>
            </div>
            <div :class="{ active: now != '' }"></div>
            <div>
              <div :class="{ active: now != '' }">2</div>
              <p :class="{ active: now != '' }">设置密码</p>
            </div>
          </div>
          <div class="box-middle">
            <input
              v-if="now == ''"
              type="text"
              placeholder="请输入手机号/系统号/账号"
              name="phone"
              v-model="phone"
              autofocus
              required
            />
            <div v-else>
              <div class="yz">
                <input
                  class="yzm"
                  type="text"
                  placeholder="请输入短信验证码"
                  name="idCode"
                  v-model="idCode"
                  autofocus
                  required
                />
                <span class="zm">
                  <div>获取验证码</div>
                </span>
              </div>

              <input
                type="text"
                placeholder="请输入新密码"
                name="upwd"
                v-model="upwd"
                autofocus
                required
                @input="checkUpwd"
              />
              <input
                type="text"
                placeholder="确认新密码"
                name="repwd"
                v-model="repwd"
                autofocus
                required
                @input="checkRepwd"
              />
            </div>
            <p>{{tip}}</p>
          </div>
          <div>
            <div v-if="now == ''" class="box-header">
              <span @click="now = 1" :class="{ active: phone != '' }"
                >下一步</span
              >
            </div>
            <div v-else class="box-header">
              <span
                @click="updatePwd"
                :class="{ active: idCode || upwd || repwd != '' }"
                >下一步</span
              >
            </div>
          </div>
          <div class="login-text">
            <span>
              <router-link to="/register">没有账号?</router-link>
              <router-link to="/register">点击注册</router-link>
              |
              <router-link to="/wang">忘记密码</router-link>
            </span>
          </div>
        </form>
      </div>
    </div>
    <!-- 页尾 -->
    <div class="footer">
      <div>
        <p>链家网（北京）科技有限公司 | 网络经营许可证 京ICP备16057509号-2</p>
        <p>© Copyright©2010-2022 链家网<span>Lianjia.com</span>版权所有</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      idCode: "",
      upwd: "",
      repwd: "",
      now: "",
      tip:''
    };
  },
  methods: {
    checkUpwd() {
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/.test(this.upwd)) {
        this.tip = "密码长度8-20位，需包含字母+数字";
        return false;
      } else {
        this.tip = "";
        return true;
      }
    },
    checkRepwd() {
      if (this.repwd != this.upwd) {
        this.tip = "两次密码输入不一致";
      } else {
        this.tip = "";
        return true;
      }
    },
    updatePwd() {
      if(this.checkUpwd()&&this.checkRepwd()){
        console.log(this.phone, this.idCode, this.upwd, this.repwd);
      const url = "/info";
      const params = `phone=${this.phone}&upwd=${this.upwd}&repwd=${this.repwd}&idCode=${this.idCode}`;
      this.axios.post(url, params).then((res) => {
        if(res.data.code == 200){
          alert('密码修改成功，是否跳转到登录页')
          this.$router.push('/login')
        }else{
          alert('请输入正确的手机号或密码')
        }
      });
      }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 10px 30px;
  height: 60px;
  .top {
    height: 20px;
    margin: 0 auto;
    .logo {
      width: 40px;
      height: 40px;
      background-image: url("../assets/img/login_logo.jpg");
      background-size: 100%;
    }
  }
}
.container {
  width: 100%;
  margin: 0px auto;
  height: 700px;
  background-image: url("../assets/img/login_bg.jpg");
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  .login-box {
    width: 380px;
    height: 460px;
    position: absolute;
    top: 120px;
    right: 120px;
    border-radius: 10px;
    background-color: white;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .box-top {
      width: 80%;
      height: 50px;
      margin: 0px auto;
      display: flex;
      justify-content: space-between;
      margin-top: 100px;
      > div:nth-child(1) {
        width: 25%;
        text-align: center;
        div {
          width: 25px;
          height: 25px;
          margin: 0 auto;
          border: 1px solid blue;
          border-radius: 50%;
          font-size: 1.2rem;
          color: blue;
        }
        p {
          font-size: 1.2rem;
          color: blue;
        }
      }
      > div:nth-child(2) {
        width: 50%;
        height: 25px;
        border-top: 1px solid #ddd;
        margin: 10px auto;
        &.active {
          border-top: 1px solid blue;
        }
      }
      > div:nth-child(3) {
        width: 25%;
        text-align: center;
        div {
          width: 25px;
          height: 25px;
          margin: 0 auto;
          border: 1px solid #ddd;
          border-radius: 50%;
          font-size: 1.2rem;
          &.active {
            border: 1px solid blue;
            color: blue;
          }
        }
        p {
          font-size: 1.2rem;
          &.active {
            color: blue;
          }
        }
      }
    }
    .box-middle {
      width: 80%;
      margin: 20px auto;
      input {
        height: 40px;
        outline: none;
        border: 1px solid #ddd;
        font-size: 1.2rem;
      }
      .yz {
        width: 100%;
        height: 42px;
        display: inline-flex;
        input {
          width: 70%;
          height: 42px;
          border: 1px solid #ddd;
        }
        .yzm {
          border-right: 0;
        }
        span {
          height: 42px;
          width: 30%;
          border: 1px solid #ddd;
          div {
            width: 100%;
            height: 20px;
            padding-left: 15px;
            margin-top: 10px;
            border-left: 1px solid #ddd;
            color: #178bf8;
          }
          div:hover {
            cursor: pointer;
          }
        }
        .zm {
          border-left: 0;
        }
      }
      > p {
          text-align: center;
          margin-top: 10px;
          color: red;
      }
    }
    .box-header {
      width: 80%;
      height: 40px;
      margin: 5px auto;
      cursor: not-allowed;
      span {
        display: block;
        line-height: 40px;
        text-align: center;
        background-color: #0984f9;
        font-size: 1.3rem;
        font-weight: bold;
        color: white;
        opacity: 0.4;
        pointer-events: none;
      }
      span.active {
        opacity: 1;
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .login-text {
      position: absolute;
      bottom: 40px;
      width: 100%;
      height: 20px;
      border-top: 1px solid #ddd;
      > span {
        display: block;
        width: 180px;
        margin-top: 20px;
        margin-left: 40%;
        a {
          color: blue;
          font-size: 1rem;
          padding: 3px;
          text-decoration: none;
          &:hover {
            opacity: 0.7;
          }
        }
      }
    }
  }
}
.footer {
  height: 100px;
  > div {
    width: 30%;
    text-align: center;
    margin: 10px auto;
    p {
      color: #ddd;
      font-size: 1.2rem;
    }
    p:last-child {
      text-align: center;
      > span {
        color: #0993fb;
      }
    }
  }
}
</style>
